<!-- 静态定位 -->
这是元素的默认定位方式，元素按照正常的文档流进行布局，不受其他定位方式的影响。


<!-- 相对定位 -->
相对定位通常用来对布局进行微调，position 为 relative 时，元素使用相对定位，
此时可以通过 top，right，bottom，left 属性对元素的位置进行微调，设置其相对于 自身 的偏移量。
元素仍然占据原来的空间。

<!-- 绝对定位 -->
绝对定位（Absolute Positioning）：通过设置`position: absolute;`，
元素相对于其最近的 已定位祖先元素（设置了除了static值以外的定位元素，或者transform,perspective属性之外） 进行定位，
如果没有已定位的祖先元素，则相对于文档的初始包含块（包含html的容器，也就是说是 浏览器的窗口 )进行定位。
可以使用`top`、`right`、`bottom`、`left`属性来精确地定位元素，元素脱离了正常的文档流，不占据空间。

<!-- 固定定位 -->
固定定位（Fixed Positioning）：通过设置`position: fixed;`
元素相对于 浏览器窗口 进行定位，始终保持在固定的位置，不随页面滚动而移动。
可以使用`top`、`right`、`bottom`、`left`属性来调整元素的位置。

<!-- 粘性定位 -->
可以看作是相对定位（Relative Positioning）和固定定位（Fixed Positioning）的结合。
粘性定位（Sticky Positioning）：通过设置`position: sticky;`，
元素在滚动到特定位置时变为固定定位，否则按照正常的文档流进行定位。
可以使用`top`、`right`、`bottom`、`left`属性来调整元素的位置。



需要注意的是，绝对定位 和 固定定位 的元素脱离了正常的文档流，可能会对其他元素的布局产生影响，因此需要谨慎使用。

